<template>
  <div class="app-container">
    <div class="overview-layout">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="out-border">
            <div class="layout-title">服务总览</div>
            <div style="padding: 40px">
              <el-row>
                <el-col :span="6" class="color-danger overview-item-value">10</el-col>
                <el-col :span="6" class="color-danger overview-item-value">30</el-col>
                <el-col :span="6" class="color-danger overview-item-value">50</el-col>
                <el-col :span="6" class="color-danger overview-item-value">90</el-col>
              </el-row>
              <el-row class="font-medium">
                <el-col :span="6" class="overview-item-title">已下架</el-col>
                <el-col :span="6" class="overview-item-title">已上架</el-col>
                <el-col :span="6" class="overview-item-title">库存紧张</el-col>
                <el-col :span="6" class="overview-item-title">全部服务</el-col>
              </el-row>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="out-border">
            <div class="layout-title">客户总览</div>
            <div style="padding: 40px">
              <el-row>
                <el-col :span="6" class="color-danger overview-item-value">10</el-col>
                <el-col :span="6" class="color-danger overview-item-value">20</el-col>
                <el-col :span="6" class="color-danger overview-item-value">100</el-col>
                <el-col :span="6" class="color-danger overview-item-value">500</el-col>
              </el-row>
              <el-row class="font-medium">
                <el-col :span="6" class="overview-item-title">今日新增</el-col>
                <el-col :span="6" class="overview-item-title">昨日新增</el-col>
                <el-col :span="6" class="overview-item-title">本月新增</el-col>
                <el-col :span="6" class="overview-item-title">客户总数</el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="statistics-layout">
      <div class="layout-title">
        <span>订单统计</span>
        <el-date-picker style="float: right;z-index: 1;margin-top: -5px;" size="small" v-model="orderCountDate"
          type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
          @change="handleDateChange" :picker-options="pickerOptions">
        </el-date-picker>
      </div>
      <el-row>
        <el-col :span="24">
          <el-card>
            <div id="serviceLineBox" class="chart-box" style="width: 100%;"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { str2Date } from '@/utils/date';
import echarts from 'echarts';
export default {
  name: 'home',
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            let start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一月',
          onClick(picker) {
            const end = new Date();
            let start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      orderCountDate: '',
      chartLine: null,
      chartBar: null,
    }
  },
  mounted() {
    this.initChartLine()
  },
  methods: {
    handleDateChange() {

    },
    // 折线图
    initChartLine() {
      var option = {
        'tooltip': {
          'trigger': 'axis'
        },
        'legend': {
          'data': ['化妆服务', '美甲服务', '美睫服务', '护肤服务', '按摩服务']
        },
        'grid': {
          'left': '3%',
          'right': '4%',
          'bottom': '3%',
          'containLabel': true
        },
        'xAxis': {
          'type': 'category',
          'boundaryGap': false,
          'data': ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        'yAxis': {
          'type': 'value'
        },
        'series': [
          {
            'name': '化妆服务',
            'type': 'line',
            'stack': '总量',
            'data': [12, 12, 10, 13, 90, 23, 21]
          },
          {
            'name': '美甲服务',
            'type': 'line',
            'stack': '总量',
            'data': [22, 18, 19, 23, 29, 33, 31]
          },
          {
            'name': '美睫服务',
            'type': 'line',
            'stack': '总量',
            'data': [15, 23, 20, 15, 19, 33, 41]
          },
          {
            'name': '护肤服务',
            'type': 'line',
            'stack': '总量',
            'data': [32, 33, 30, 33, 39, 33, 32]
          },
          {
            'name': '按摩服务',
            'type': 'line',
            'stack': '总量',
            'data': [82, 93, 90, 93, 12, 13, 13]
          }
        ]
      }
      this.chartLine = echarts.init(document.getElementById('serviceLineBox'))
      this.chartLine.setOption(option)
      window.addEventListener('resize', () => {
        this.chartLine.resize()
      })
    },

  }
}
</script>

<style scoped>
.app-container {
  margin-left: 20px;
  margin-right: 20px;
}

.layout-title {
  color: #606266;
  padding: 15px 20px;
  background: #F2F6FC;
  font-weight: bold;
  line-height: 25px;
}

.overview-layout {
  margin-top: 20px;
}

.overview-item-value {
  font-size: 24px;
  text-align: center;
}

.overview-item-title {
  margin-top: 10px;
  text-align: center;
}

.out-border {
  border: 1px solid #DCDFE6;
}

.statistics-layout {
  margin-top: 20px;
  border: 1px solid #DCDFE6;
}

.chart-box {
  min-height: 400px;
}
</style>